The latest update to WordPress, version 6.4, introduces changes to script loading on the front end, enhancing page load times and performance for numerous websites.
Script loading strategies are now part of the core and bundled themes of WordPress, optimizing the performance when loading scripts with defer and async attributes.
These attributes direct the browser to load scripts in the background (async) or after the rest of the page has loaded (defer), significantly speeding up the time it takes for a page to become interactive.
Faster Page Loads With Intelligent Script Handling
Previously, JavaScript files in WordPress themes and plugins were loaded without specifying asynchronous loading, which led to blocked downloads and delayed page rendering while they were retrieved and executed.
As a result of this update, website visitors will experience faster loading pages, specifically improving the Core Web Vitals’ first contentful paint (FCP) metric, impacting the speed at which the page initially appears.
Behind the Scenes: How WordPress Achieved This
JavaScript files for blocks like navigation menus and embedded media now have ‘defer’ added when enqueued. The wp-embed script for presenting embedded posts also uses ‘defer.’
Prior to this, there wasn’t a standard method for adding these attributes. The introduction of a dedicated API in WordPress 6.3, followed by full implementation in 6.4, now provides developers with a standardized approach to control script loading times.
Additionally, the update relocates most deferred scripts back into the head section since they no longer hinder rendering. This change allows the browser to discover and cache them earlier, boosting performance.
A few lower-priority scripts, such as the ones for comment replies, will remain in the footer but are loaded asynchronously with ‘async’ to ensure they load simultaneously with other resources.
Real-World Impacts For Website Visitors
For website visitors, pages with WordPress content will load faster post-update, reducing “jank” or undesired movement of page elements once they initially appear.
These modifications establish a foundation for even more improvements in the future.
Featured Image: Wirestock Creators/Shutterstock
